<template>
  <sc-dialog title="岗位人员信息列表" v-model="visible" width="45%" destroy-on-close @closed="$emit('closed')">
    <el-container>
      <el-header class="searchBox">
        <el-form :inline="true" class="form-inline">
          <el-form-item>
            <!-- label="模糊查询" -->
            <el-input v-model="params.keywords" placeholder="用户信息" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch()">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="handleEdit()">编辑</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main class="nopadding">
        <scTable ref="table" :data="listData" v-bind:params="params" row-key="id" stripe border remoteSort hidePagination>
          <el-table-column label="登录账号" prop="userName" sortable></el-table-column>
          <el-table-column label="真实姓名" prop="realName"></el-table-column>
          <el-table-column label="手机号码" prop="telphone" width="120"></el-table-column>
          <el-table-column label="性别" prop="gender" width="70"></el-table-column>
          <el-table-column label="操作" align="left">
            <template #default="scope">
              <el-button-group>
                <el-popconfirm title="确定删除吗？" @confirm="handleRemove(scope.row, scope.$index)">
                  <template #reference>
                    <el-button type="text" size="small" icon="el-icon-remove" class="btnRed">删除</el-button>
                  </template>
                </el-popconfirm>
              </el-button-group>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
    <template #footer>
      <el-button @click="visible=false">关 闭</el-button>
    </template>
  </sc-dialog>

  <!-- 人员设置弹窗 -->
  <userList-dialog v-if="dialog.userList" ref="userListDialog" @success="userListCallBack" @closed="dialog.userList = false">
  </userList-dialog>
</template>

<script>
import userListDialog from "@/views/components/userList";

export default {
  name: 'postuser',
  components: {
    userListDialog
  },
  data() {
    return {
      visible: false,
      params: {
        postId: null,
        keywords: "",
        readOnly:true
      },
      listData: [],
      dialog: {
        userList: false,
      },
      userIdList: [],
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    //获取菜单列表信息
    open(row) {
      this.visible = true;
      this.initData(row);
    },
    //初始化信息
    async initData(row) {
      this.params.postId = row.id;
      var res = await this.$API.user.getUserListByPost.get(this.params);
      if (res.code == 200) {
        this.$refs.table.tableData = res.data;
        this.$refs.table.total = res.data.length;

        res.data.forEach(element => {
          this.userIdList.push(element.id);
        });
      }
    },
    //获取数据
    async handleSearch(readOnly) {

      if (readOnly!=undefined) {
        this.params.readOnly = readOnly;
      }
      var res = await this.$API.user.getUserListByPost.get(this.params);
      if (res.code == 200) {

        this.$refs.table.tableData = res.data;
        this.$refs.table.total = res.data.length;

        this.userIdList=[];
        res.data.forEach(element => {
          this.userIdList.push(element.id);
        });
      }
    },
    //单条删除
    async handleRemove(row, index) {
      var par = {
        userId: row.id,
        postId: this.params.postId
      }
      var res = await this.$API.post.deleteUserPost.delete(par);
      if (res.code == 200) {
        //这里选择刷新整个表格 OR 插入/编辑现有表格数据
        this.$refs.table.tableData.splice(index, 1);

        var indexUser = this.userIdList.indexOf(row.id);
        if (indexUser > -1) {
          this.userIdList.splice(indexUser, 1);
        }
        this.$Message.success("删除成功");
      } else {
        this.$Message.warning(res.msg);
      }
    },
    //添加人员信息
    handleEdit() {
      this.dialog.userList = true;
      this.$nextTick(() => {
        let obj = JSON.parse(JSON.stringify(this.userIdList)); //row是父组件传递的对象
        this.$refs.userListDialog.open(obj);
      });
    },
    //用户设置回调
    async userListCallBack(userIdList) {
      var par = {
        postId: this.params.postId,
        userIdList: userIdList
      };
      var res = await this.$API.post.updatePostUser.put(par);
      if (res.code == 200) {
        this.handleSearch(false);
      } else {
        this.$Message.warning(res.msg);
      }
    },
  }
}
</script>

